<style>
  .reviews-total {
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    color: #1d1f21;
  }

  .scoring-total {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 400;
    color: #1d1f21;
    margin-top: 10px;
  }

  .scoring-total span {
    margin-left: 14px;
  }

  .scoring-total svg {
    margin-right: 6px;
  }

 

    .comment-star-warp {
    position: relative;
    display: flex;
    align-items: center;
  }

  .comment-star-warp-choose {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .comment-star-warp-choose svg {
    flex-shrink: 0;
  }

  .comment-list-warp{
    padding:80px 0 0 0;
  }

   @media screen and (min-width: 768px) and (max-width: 1024px) {
    .comment-list-warp{
    padding:30px 0 0 0;
  }
 
   }
   @media screen and (max-width: 767px) {
    .comment-list-warp{
    padding:20px 0 0 0;
  }
   }
   @media screen and (max-width: 1024px) {

  .comment_container {
    column-count: 1;
  }

}

 .comments_list .product {
    height: 180px;
    background: #f6f6f6;
    display: flex;
  }

  .comments_list .product-comment {
    padding:0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow:hidden;
  }


  .comments_list .product-comment .product-comment-total {
    font-size: 14px;
    font-weight: 300;
    color: #888888;
    margin-top: 16px;

  }
  .comments_list .product-comment .comment-product-title{
    font-size: 24px;
    font-weight: bold;
    color: var(--title_color);
    text-align: left;
  }

  .comments_list .product-comment-fraction {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }

  .comments_list .product-comment-fraction svg {
    margin-right: 4px;
  }

  .comments_list .product-comment-fraction>svg:last-child {
    margin-right: 0;
  }

  .comments_list .product-comment-fraction span {
    font-weight: 500;
    color: var(--title_color);
    font-size: 24px;
    line-height: 24px;
    margin-left: 10px;
  }

  .comments_list .product-proportion {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 40px;
    flex-shrink: 0;
  }

  .comments_list .product-proportion-row {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .comments_list .product-proportion-row+.product-proportion-row {
    margin-top: 6px;
  }

  .comments_list .product-proportion-fraction {
    width: 160px;
    height: 10px;
    background: #dddddd;
    margin: 0 4px;
    position: relative;
  }

  .comments_list .product-comment-total-progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #BBBBBB;
    z-index: 10;
  }

  .comments_list .product-proportion-number {
    font-weight: 300;
    color: #1d1f21;
    font-size: 14px;
  }

 


  .comments_list .comment-star-warp {
    position: relative;
    display: flex;
    align-items: center;
  }

  .comments_list .comment-star-warp-choose {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .comments_list .comment-star-warp-choose svg {
    flex-shrink: 0;
  }


  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .comments_list .product {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
      padding-bottom:30px;
      margin-bottom: 0;
    }

    .comments_list .product .product-images {
      width: 100%;
      height: auto;
    }

    .comments_list .product .product-images img {
      width: 100%;
      height: auto;
    }

    .comments_list .product .product-comment {
      margin-left: 0;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;

    }

    .comments_list .product .product-proportion {
      margin-left: 0;
      width: 100%;
      align-items: center;
      margin-top: 30px;
      padding: 0;
    }

    .comments_list .comment_container {
      column-count: 1;
    }

    .comments_list .product-comment .comment-product-title{
      text-align: center;
    }
  }
  @media screen and (max-width: 767px){
    .comments_list .product {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
        padding-bottom:15px;
      margin-bottom: 0;
    }

    .comments_list .product .product-images {
      width: 100%;
      height: auto;
    }

    .comments_list .product-comment .comment-product-title{
      text-align: center;
    }

    .comments_list .product .product-images img {
      width: 100%;
      height: auto;
    }

    .comments_list .product .product-comment {
      margin-left: 0;
      margin-top: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;

    }
    .comments_list .product-comment .product-comment-total{
      margin-top: 10px;
    }

    .comments_list .product .product-proportion {
      margin-left: 0;
      margin-top: 15px;
      padding: 0;
    }
    .comments_list .comments_detail-comment-wrap{
      margin-top: 15px;
    }

    .comments_list .comment_container {
      column-count: 1;
    }
  }




  .drawer-header{
    height:56px;
    text-align: center;
    line-height: 56px;
    position: relative;
  }
  .drawer-header df-oemdrawer-close{
    position: absolute;
    right: 15px;
    top: 15px;
  }
 df-oemdrawer-popup .drawer-footer{
    padding: 20px 15px;
    border-top:1px solid #DDDDDD;
  }
  .drawer-body{
    padding: 0 15px;
    max-height: 60vh;
    overflow-y: auto;
  }
  .filter-button{
    height: 36px;
    padding: 0 10px;
    border: 1px solid #1D1F21;
    border-radius: 4px;
    display: inline-flex;
  }
  .drawer-footer .drawer-btn{
    margin-top: 0;
  }
  .web_filter_clear{
    height: 60px;
    line-height: 60px;
    text-decoration: underline;
    display: none;
    cursor: pointer;
  }

  .collection-filter-box{
    width:18%;margin-right: 4%;
    display: block;
  }

  .filter-box .checkbox_label .check_icon{
    flex-shrink: 0;
  }
  @media screen and (min-width: 767px) {
    .collection-filter-sticky{
      position:sticky;
      top:0;
    }
  }
  @media screen and (max-width: 767px) {
    .collection-filter-box{
      display: none;
    }
  
  }

  select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: none;
            background: none;
            padding: 0;
            margin: 0;
            font: inherit;
            color: inherit;
            outline: none;
        }

        
        .custom-select {
          font-family: Montserrat, Montserrat;
            min-width: 155px;
            height: 40px;
            border: 1px solid #DDDDDD;
            cursor: pointer;
            padding: 0 20px 0 10px;
            box-sizing: border-box;
            font-size: 14px;
            font-weight: 400;
            color: #1D1F21;
        }

        
        .custom-select-wrapper {
            position: relative;
            display: inline-block;
        }

        .custom-select-wrapper::after {
            content: '';
            position: absolute;
            right:  10px;
            top: 17px;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 6px solid black;
        }


   df-oemdrawer-popup {
    position: fixed;
    z-index: 50102;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: none;
  }

  .df-oemdrawer-open df-oemdrawer-popup {
    display: flex;
  }

  .df-oemdrawer-open .df-oemdrawer-popup-open[position="left"],
  .df-oemdrawer-open .df-oemdrawer-popup-open[position="right"] {
    transform: translateX(0);
  }

  .df-oemdrawer-open .df-oemdrawer-popup-open[position="top"],
  .df-oemdrawer-open .df-oemdrawer-popup-open[position="bottom"] {
    transform: translateY(0);
  }
  .drawer-cover{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 10;

  }
   df-oemdrawer-popup-warp {
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 100;
  }

   df-oemdrawer-popup-warp[position="left"] {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    transform: translateX(-100%);
    height: 100%;
    transition: all 0.35s ease-in-out;
  }

   df-oemdrawer-popup-warp[position="right"] {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    transform: translateX(100%);
    height: 100%;
    transition: all 0.35s ease-in-out;
  }

   df-oemdrawer-popup-warp[position="top"] {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    transform: translateY(-100%);
    transition: all 0.35s ease-in-out;
  }

 
   df-oemdrawer-popup-warp[position="bottom"] {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    transform: translateY(100%);
    transition: all 0.35s ease-in-out;
  }
  .filter-box .filter-box-item{
    padding:0;
    display:flex;
    line-height: 18px;
    justify-content: start;
    text-align: left;
    margin-bottom: 20px;
  }


   df-oemmenu{
    display: block;
    width:100%;
  }
   df-oemmenu + df-oemmenu{
    border-top:1px solid #ddd
  }
   df-oemmenu df-oemmenu-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    min-height:40px;
    padding:6px 20px 6px 0;
    font-weight: bold;
    cursor: pointer;
    position: relative;
  }
   df-oemmenu df-oemmenu-label::before {
    position: absolute;
    top: 50%;
    right: 0;
    width: 16px;
    height: 1px;
    background-color: var(--menu-color, #000);
    content: "";
  }
   df-oemmenu df-oemmenu-label::after {
    position: absolute;
    right: 8px;
    top: 50%;
    bottom: 0;
    height: 16px;
    width: 1px;
    margin-top: -8px;
    opacity: 1;
    background-color: var(--menu-color, #000);
    transition: all 0.2s;
    content: "";
  }

  df-oemmenu-warp{
    display:block;
  }
 df-oemmenu df-oemmenu-warp {
    display: none;
  }

 .df-oemmenu-acrive  df-oemmenu-warp {
    display: block;
  } 
  .df-oemmenu-acrive df-oemmenu-label::after {
    transform: rotate(270deg);
    opacity: 0 !important;

  }
  .checkbox_label .check_icon{
    border-radius: 50%;
  }

  #is_image option:nth-child(1) {
    display: none;
  }
  #star_eq option:nth-child(1) {
    display: none;
  }
  #star_eq option:nth-child(1),#star_eq option:nth-child(2) {
    letter-spacing: 0;
  }
  .comments_list .comment_warp  .video-icon{
   position: absolute;
  z-index: 100;
  top: 40px;
  left: 40px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: none;
  }
</style>


<div class="comments_list container_wrapper" id="comments_list">
  <h1 class="title">{{lang.comments.title}}</h1>

  {% comment %} <div class="reviews-total">{{lang.comments.reviews}}({{all_comment.statistics.count}})</div> {% endcomment %}

  <div class="product">
    <div class="product-comment">
      <a class="comment-product-title line-clamp2">{{storeConfig.name | upcase}}</a>
      <div class="product-comment-fraction">
        <div class="comment-star-warp">
          {% assign score_uncheck_color = theme_config.global.product_score_uncheck_color | default:'#bbbbbb' %}
          {% assign score_selected_color = theme_config.global.product_score_selected_color | default:'#F8AD6B' %}
          {% for index in (1..5) %}
          {% include icon_block_star , width:"24",height:"24",color: score_uncheck_color %}
          {% endfor %}
          {% assign star = 0 %}
          {% if  all_comment.statistics.star %}  {% assign star = all_comment.statistics.star | divided_by: 5 | times:100 %} {% endif %}
          <div class="comment-star-warp-choose" style="width:{{star}}%">
            {% for index in (1..5) %}
            {% include icon_block_star , width:"24",height:"24",color: score_selected_color %}
            {% endfor %}
          </div>
        </div>
        <span>{{all_comment.statistics.star}}</span>
      </div>
    </div>
    <div class="product-proportion">
      <div class="product-proportion-row {% if product_comment.product.star_list.fifth > 0 %}cursor-star{% endif %}" data-value="5"  {% if star_eq and star_eq != 5 %} style="opacity: 0.4;" {% endif %}>
         
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
        {% if  all_comment.statistics.star_list.fifth %}
          <div class="product-comment-total-progress" style="background-color: {% if star_eq and star_eq == 5 %}#FF8316{% endif %}; width:{{ all_comment.statistics.star_list.fifth | divided_by: all_comment.statistics.count | times: 100 }}%"></div>
        {% endif %}
        </div>
        <div class="product-proportion-number" style="color: {% if star_eq and star_eq == 5 %}#FF8316{% endif %};">（{{all_comment.statistics.star_list.fifth}}）</div>
      </div>
      <div class="product-proportion-row {% if product_comment.product.star_list.fourth > 0 %}cursor-star{% endif %}"  data-value="4"  {% if star_eq and star_eq != 4 %} style="opacity: 0.4;" {% endif %}>
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {%- if index <= 4 -%}
            {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
            {%- else -%}
            {{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}} 
          {%- endif -%}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
         {% if  all_comment.statistics.star_list.fourth %}
                  <div class="product-comment-total-progress" style="background-color: {% if star_eq and star_eq == 4 %}#FF8316{% endif %};width:{{ all_comment.statistics.star_list.fourth | divided_by: all_comment.statistics.count | times: 100 }}%"></div>
         {% endif %}

        </div>
        <div class="product-proportion-number" style="color: {% if star_eq and star_eq == 4 %}#FF8316{% endif %};">（{{all_comment.statistics.star_list.fourth}}）</div>
      </div>
      <div class="product-proportion-row {% if product_comment.product.star_list.third > 0 %}cursor-star{% endif %}" data-value="3" {% if star_eq and star_eq != 3 %} style="opacity: 0.4;" {% endif %}>
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {%- if index <= 3 -%}
            {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
            {%- else -%}
            {{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}} 
          {%- endif -%}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
         {% if  all_comment.statistics.star_list.third %}
           <div class="product-comment-total-progress" style="background-color: {% if star_eq and star_eq == 3 %}#FF8316{% endif %};width:{{ all_comment.statistics.star_list.third | divided_by: all_comment.statistics.count | times: 100 }}%"></div>
         {% endif %}

        </div>
        <div class="product-proportion-number" style="color: {% if star_eq and star_eq == 3 %}#FF8316{% endif %};">（{{all_comment.statistics.star_list.third}}）</div>
      </div>
      <div class="product-proportion-row {% if product_comment.product.star_list.second > 0 %}cursor-star{% endif %}" data-value="2" {% if star_eq and star_eq != 2 %} style="opacity: 0.4;" {% endif %}>
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {%- if index <= 2 -%}
            {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
            {%- else -%}
            {{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}} 
          {%- endif -%}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
          {% if  all_comment.statistics.star_list.second %}
              <div class="product-comment-total-progress" style="background-color: {% if star_eq and star_eq == 2 %}#FF8316{% endif %};width:{{ all_comment.statistics.star_list.second | divided_by: all_comment.statistics.count | times: 100 }}%"></div>
          {% endif %}
        </div>
        <div class="product-proportion-number" style="color: {% if star_eq and star_eq == 2 %}#FF8316{% endif %};">（{{all_comment.statistics.star_list.second}}）</div>
      </div>
      <div class="product-proportion-row {% if product_comment.product.star_list.first > 0 %}cursor-star{% endif %}" data-value="1" {% if star_eq and star_eq != 1 %} style="opacity: 0.4;" {% endif %}>
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {%- if index <= 2 -%}
            {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
            {%- else -%}
            {{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}} 
          {%- endif -%}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
           {% if  all_comment.statistics.star_list.first %}
           <div class="product-comment-total-progress" style="background-color: {% if star_eq and star_eq == 1 %}#FF8316{% endif %};width:{{ all_comment.statistics.star_list.first | divided_by: all_comment.statistics.count | times: 100 }}%"></div>
           {% endif %}

        </div>
        <div class="product-proportion-number" style="color: {% if star_eq and star_eq == 1 %}#FF8316{% endif %};">（{{all_comment.statistics.star_list.first}}）</div>
      </div>
    </div>
  </div>


  <div class="df-hidden md:df-flex" style="margin-top: 40px;justify-content: space-between;">
    <div style="display: flex;align-items: center;">
      <div class="df-hidden md:df-flex" style="align-items: center;">
        <div class="custom-select-wrapper">
        <select class="custom-select" id="is_image" >
          <option value="">{{lang.general.all}}</option>
          <option value="0">{{lang.general.all}}</option>
          <option value="1" {% if is_image == 1 %}selected="selected" {% endif %}>{{lang.general.images}}</option>
        </select>
        </div>
      </div>
      <div class="df-hidden md:df-flex" style="align-items: center;margin-left: 8px;">
        <div class="custom-select-wrapper">
        <select class="custom-select" id="star_eq">
          <option value="">{{lang.general.rating}}</option>
          <option value="0">{{lang.general.all}}</option>
          <option value="5" {% if star_eq == 5 %}selected="selected" {% endif %}>&#9733; &#9733; &#9733; &#9733; &#9733;</option>
          <option value="4" {% if star_eq == 4 %}selected="selected" {% endif %}>&#9733; &#9733; &#9733; &#9733; &#x2606;</option>
          <option value="3" {% if star_eq == 3 %}selected="selected" {% endif %}>&#9733; &#9733; &#9733; &#x2606; &#x2606;</option>
          <option value="2" {% if star_eq == 2 %}selected="selected" {% endif %}>&#9733; &#9733; &#x2606; &#x2606; &#x2606;</option>
          <option value="1" {% if star_eq == 1 %}selected="selected" {% endif %}>&#9733; &#x2606; &#x2606; &#x2606; &#x2606;</option>
        </select>
        </div>
      </div>
    </div>
    <div class="df-hidden md:df-flex" style="align-items: center;">
      <span style="display:inline-block; margin-right: 10px;">{{ lang.general.sort_by }}</span>
      <div class="custom-select-wrapper">

      <select class="custom-select" id='sort_by'>
        {% assign sort_by = sort_by  | lstrip %}
        {% for option in sort_options %}
        <option value="{{option.value}}" {% if option.value == sort_by %}selected="selected" {% endif %}>{{ option.name }}</option>
        {% endfor %}
      </select>
      </div>

    </div>
  </div>

  <df-oemdrawer class="df-block md:df-hidden" style="margin-top: 25px;">
    <df-oemdrawer-label class="df-flex df-items-center filter-button">
      <svg t="1676972155640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8122" width="24" height="24"><path d="M192 352m32 0l512 0q32 0 32 32l0 0q0 32-32 32l-512 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#1D1F21" p-id="8123"></path><path d="M192 640m32 0l512 0q32 0 32 32l0 0q0 32-32 32l-512 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#1D1F21" p-id="8124"></path><path d="M288 288m32 0l0 0q32 0 32 32l0 128q0 32-32 32l0 0q-32 0-32-32l0-128q0-32 32-32Z" fill="#1D1F21" p-id="8125"></path><path d="M608 576m32 0l0 0q32 0 32 32l0 128q0 32-32 32l0 0q-32 0-32-32l0-128q0-32 32-32Z" fill="#1D1F21" p-id="8126"></path></svg>
      <span style="margin-left: 5px;">{{lang.collections.detail.filter}}</span>
    </df-oemdrawer-label>
    <df-oemdrawer-popup>
      <df-oemdrawer-close class="drawer-cover drawer-close"></df-oemdrawer-close>
      <df-oemdrawer-popup-warp position="bottom">
        <div class="df-w-screen">
          <div class="drawer-header">
            <span class="df-font-bold" >{{lang.collections.detail.filter}}</span>
            <df-oemdrawer-close class="df-flex df-items-center drawer-close">
              <svg t="1676972642582" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8275" width="20" height="20"><path d="M571.008 511.936l313.088-311.04a42.688 42.688 0 0 0 0-58.816l-2.496-2.496a40.384 40.384 0 0 0-56.704 0l-313.088 313.6-313.088-311.04a40.384 40.384 0 0 0-56.704 0l-2.496 2.496a42.688 42.688 0 0 0 0 58.816l313.088 308.608-313.088 311.04a42.688 42.688 0 0 0 0 58.816l2.496 2.496a40.384 40.384 0 0 0 56.704 0l313.088-313.6 313.088 311.04a40.384 40.384 0 0 0 56.704 0l2.496-2.496a42.688 42.688 0 0 0 0-58.816z" fill="#1D1F21" p-id="8276"></path></svg>
            </df-oemdrawer-close>
          </div>
          <div class="drawer-body collection-mobile-filter">
            <df-oemmenu class='df-block md:df-visible'>
              <df-oemmenu-label>
                <div >{{lang.general.sort_by}}</div>
              </df-oemmenu-label>
              <df-oemmenu-warp>
                <div class="filter-box">
                    {% for option in sort_options %}
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        {% assign sort_by = sort_by | lstrip %}
                        <input class=" mo-checkbox_input order_checkbox" type="radio" style=" flex-shrink: 0;" {% if option.value == sort_by %}checked{% endif %}   name="sort_by" value="{{option.value}}"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{option.name}}
                      </label>
                    {% endfor %}
                </div>
              </df-oemmenu-warp>
            </df-oemmenu>
              <df-oemmenu >
                <df-oemmenu-label>
                  <div >{{lang.general.image_and_videos}}</div>
                </df-oemmenu-label>
                <df-oemmenu-warp>
                    <div class="filter-box">
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " {% if is_image == 0 %}checked{% endif %}  style=" flex-shrink: 0;" type="radio" name="is_image" value="0"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{lang.general.all}}
                      </label>
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " {% if is_image == 1 %}checked{% endif %}  style=" flex-shrink: 0;" type="radio" name="is_image" value="1"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{lang.general.with_images}}
                      </label>
                    </div>
                </df-oemmenu-warp>
              </df-oemmenu>
              <df-oemmenu style="border-top: 1px solid #E9E9E9;">
                <df-oemmenu-label>
                  <div >{{lang.general.rating}}</div>
                </df-oemmenu-label>
                <df-oemmenu-warp>
                    <div class="filter-box star-filter-box">
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " {% if star_eq == 0 %}checked{% endif %}  style=" flex-shrink: 0;" type="radio" name="star_eq" value="0"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{lang.general.all}}
                      </label>
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " {% if star_eq == 5 %}checked{% endif %}  style=" flex-shrink: 0;" type="radio" name="star_eq" value="5"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>&#9733; &#9733; &#9733; &#9733; &#9733;
                      </label>
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " {% if star_eq == 4 %}checked{% endif %}  style=" flex-shrink: 0;" type="radio" name="star_eq" value="4"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>&#9733; &#9733; &#9733; &#9733; &#x2606;
                      </label>
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " {% if star_eq == 3 %}checked{% endif %}  style=" flex-shrink: 0;" type="radio" name="star_eq" value="3"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>&#9733; &#9733; &#9733; &#x2606; &#x2606;
                      </label>
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " {% if star_eq == 2 %}checked{% endif %}  style=" flex-shrink: 0;" type="radio" name="star_eq" value="2"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>&#9733; &#9733; &#x2606; &#x2606; &#x2606;
                      </label>
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " {% if star_eq == 1 %}checked{% endif %}  style=" flex-shrink: 0;" type="radio" name="star_eq" value="1"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>&#9733; &#x2606; &#x2606; &#x2606; &#x2606;
                      </label>
                    </div>
                </df-oemmenu-warp>
              </df-oemmenu>
  
          </div>
          <div class="drawer-footer df-flex df-gap-4" style="padding: 16px 15px;border-top: 1px solid #E9E9E9;">
            {% if section.settings.tag_type != 1 %}
            <div class="drawer-btn secondary_btn df-px-5 filter_clear drawer-close">{{lang.collections.detail.clear_all | default:"Clear all"}}</div>
            {% endif %}
            <div class="drawer-btn main_btn df-flex-1 drawer-close" id="filter_submit">{{lang.cart.list.apply | default:"Apply"}}</div>
          </div>
        </div>
      
      </df-oemdrawer-popup-warp>
    </df-oemdrawer-popup>
  </df-oemdrawer>

  <div class="" style="margin-top: 20px;">
    {% assign commentsLangth = all_comment.comments | size %}
    {% if commentsLangth %}
    <div id="comments_list-warp"></div>
    {% else %}
		{% include 'empty' ,{text:lang.comments.no_comments, icon:"comment" }%}
    {% endif %}
  </div>

  {% include pagination ,{ paginate : paginate } %}


</div>
{% include 'page_back_button',href:"" %}


{% include comment %}
<script>
  (function(){
    var comment = {{all_comment.comments|pubic_front_imgcdn_replace|json}};
    console.log(comment);
    const waterfall = new waterfalls({
        id: "#comments_list-warp",
        bottomDistance: 30,
        renderType: "liquid",
        renderComplete(node) {
          {% comment %} window.addLazyImages && addLazyImages(node.find("img[data-src]")); {% endcomment %}
          node.find('.comment_warp-images img').click(function () {
            const JqThis = $(this);
            const parentIndex = JqThis.data("parent");
            moi.pictureImages(comment[parentIndex].images.src, JqThis.data("index") - 1, JqThis)
          })
        },
        resizeConfig: [
          { min: 0, max: 1023, rowGutter: '20px', columnsGutter: '20px', columns: 1 },
          { min: 1024, rowGutter: '30px', columnsGutter: '30px', columns: 2 }
        ],
        render(data, callback) {
          engine.parseAndRender($("#id-comment-temp-block").html(), {
            comments: data.map((item) => {
              item.price = formatMoney(item.price, _GET_C_SETTING_("currency"));
              item.created_at_str = moi.formatZoneDate(item.created_at, "YYYY-mm-dd");
              item.replied_at_str = moi.formatZoneDate(item.replied_at, "YYYY-mm-dd");
              return item;
            }),
            lang: lang,
            storeConfig: storeConfig,
            data_from:'{{data_from}}',
            is_product:true
          }).then(function (liquidHtml) {
            const node = $(liquidHtml);
            callback && callback.call(this, node)
          });

        }
    })
    if(comment.length){
      waterfall.addStorage(comment)
    }



    function getWebFilterParams(){
      var sort_by = $('#sort_by').val();
      var is_image = $('#is_image').val();
      var star_eq = $('#star_eq').val();
      return {
        "sort_by": sort_by,
        "is_image": is_image,
        "star_eq":star_eq,
        "page": 1
      }
    }

    function webFilterChange(){
        if($(event.target).val() == '0') {
          $(event.target).val('')
        }
        var filterParams =  getWebFilterParams();
        location.href = moi.setUrlParams(location.href, filterParams);
    }
		$('#sort_by').change(webFilterChange)
		$('#is_image').change(webFilterChange)
		$('#star_eq').change(webFilterChange)

    $(".filter_clear").click(function(){
      location.href = moi.setUrlParams(location.href, { "sort_by": "","is_image":"","star_eq":"","page": 1});
    })

    function getMobileFilterParams(){
      var sort_by = $('input[name="sort_by"]:checked').val();
      var is_image = $('input[name="is_image"]:checked').val();
      var star_eq = $('input[name="star_eq"]:checked').val();
      return {
        "sort_by": sort_by,
        "is_image": is_image,
        "star_eq":star_eq,
        "page": 1
      }
    }
    $("#filter_submit").click(function(){
      var filterParams =  getMobileFilterParams();
      location.href = moi.setUrlParams(location.href, filterParams);
    })
    


    $("body").on("click", "df-oemmenu df-oemmenu-label", function () {
        $(this).parent().find("df-oemmenu-warp").slideToggle()
        if($(this).parent().hasClass("df-oemmenu-acrive")){
          $(this).parent().find("df-oemmenu-warp").slideUp('slow',function(){
            $(this).parent().removeClass("df-oemmenu-acrive");
          });

        }else{
          $(this).parent().find("df-oemmenu-warp").slideDown('slow',function(){
          });
          $(this).parent().addClass("df-oemmenu-acrive"); 
        }
        
    });


    $("body").on("click", "df-oemdrawer df-oemdrawer-label", function () {
      var node = $(this).parent();
      node.addClass("df-oemdrawer-open");
      setTimeout(function () {
          node.find("df-oemdrawer-popup-warp").addClass("df-oemdrawer-popup-open");
      }, 100);
    });

    $("body").on("click", ".drawer-close", function () {
        var node = $(this).parents("df-oemdrawer");
        node.find("df-oemdrawer-popup-warp").removeClass("df-oemdrawer-popup-open");
        setTimeout(function () {
            node.removeClass("df-oemdrawer-open");
        }, 350);
    });
    
    $(".cursor-star").click(function(){ 
      var value = $(this).data("value");
      location.href = moi.setUrlParams(location.href, {star_eq:value});
    })
  })()
  
</script>